<template>
    <div class="container">
      <div class="top">
        <div class="flex borderBottom">
          <div>订单编号</div>
          <div>{{orderNumber}}</div>
        </div>
        <div class="flex">
          <div>订单金额</div>
          <div class="color">￥{{price}}.00</div>
        </div>
      </div>

      <div class="pay" @click="payOrder">
        <div class="flex2">
          <img class="wechat" src="../assets/wechat.png" >
           微信支付
        </div>
        <img class="right" src="../assets/right.png">
      </div>
    </div>  
</template>

<script>
import API from '../api/api';
export default {
  data(){
    return {
      orderNumber:'', 
      price:'',
    }
  },
  mounted(){
    var p = this.$route.query;
    this.price = p.price
    this.getOrderInfo();
  },
  methods:{
    //获取订单信息
    getOrderInfo:function(){
      var url = this.HOST + API.getOrderInfoUrl;
      var p = this.$route.query;
      this.$http.post(url+'?roomId='+p.roomId+'&times='+p.times+'&price='+p.price+'&total='+p.total).then(res=>{
        console.log('orderInfo',res)
        this.orderNumber = res.data.order_code;
      })
    },
    //付款
    payOrder:function(orderN){
      var url = this.HOST + API.payOrderUrl;
      var openid = sessionStorage.getItem('openid');
      // var params = { out_trade_no:this.orderNumber,total_fee:this.price};
      this.$http.post(url+'?out_trade_no='+this.orderNumber+'&price='+this.price*100+'&openid='+openid).then(res=>{
        if(res.data.isSuccessflag){
          var params = res.data.dataMap;
          this.payRes(params,this)
        }else{
          this.$message({
            message: res.data.message,
          });
        }
      })
    },
    payRes:function(params,that){
      WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":params.appId,     //公众号名称，由商户传入     
         "timeStamp":params.timeStamp,         //时间戳，自1970年以来的秒数     
         "nonceStr":params.nonceStr, //随机串     
         "package":params.package,     
         "signType":params.signType,         //微信签名方式：     
         "paySign":params.paySign //微信签名
      },function(res){
        if(res.err_msg == "get_brand_wcpay_request:ok" ){
          that.$router.push({path:'/'})
        } 
      })
    }
  }
}
</script>
<style scoped>
  html{
    padding: 0;
    margin: 0;
  }
  .container{
    color:rgb(81,81,81);
    font-size: 13px;
  }
  .top{
    background: rgb(243, 244, 246);
    padding: 15px 0;
  }
  .flex{
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 50px;
    background: #fff;
    padding: 0 10px;
  }
  .borderBottom{
    border-bottom: 1px solid rgb(244,244,244)
  }
  .color{
    color:rgb(220,98,22)
  }
  .pay{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px solid rgb(244,244,244);
    padding: 0 10px;
  }
  .wechat{
    width: 25px;
    height: 25px;
    margin-right: 15px;
  }
  .right{
    width:20px;
    height: 20px;
  }
  .flex2{
    display: flex;
  }
</style>
